<template>
	<view>
		<!-- 状态栏 -->
		<view class="status_bar" style="background-color: #191919;position: sticky;top: 0;z-index: 999;"></view>

		<view class="top">
			<view class="user">
				<view class="cu-avatar xl round" :style="'background-image: url(' + userinfo.full_picture + ')'"></view>
				<view class="info margin-left">
					<view class="name">
						<text v-if="token">{{userinfo.nickname}}</text>
						<text v-else @click="$goto('/pages/account/login')">点击登录</text>
						<text class="vip text-xs level1" v-show="token">
							{{userinfo.level_name}}
						</text>
					</view>
					<view class="uid">UID:{{userinfo.invite_code||'******'}}</view>
				</view>
			</view>

			<image class="setting" src="../../static/images/setting.png" mode="widthFix" @click="$goto('/pages/mine/personal')"></image>

			<view class="msg text-white" @click="$goto('/pages/mine/notice-list')">
				<u-icon name="bell" class="icon" color="#fff" size="32"></u-icon>
				<text class="text">消息</text>
			</view>

			<view class="btm text-white">
				<view class="item">
					<view class="text-xl text-bold">{{wallet.wallet||'0.00'}}</view>
					<view class="text-white margin-tb-xs">账户余额</view>
				</view>
				<view class="item">
					<view class="text-xl text-bold">{{wallet.realtime_amount||'0.00'}}</view>
					<view class="text-white margin-tb-xs">实时收益</view>
				</view>
				<view class="item">
					<view class="text-xl text-bold">{{userinfo.quota.quota||'0.00'}}</view>
					<view class="text-white margin-tb-xs">VIP权益额度</view>
				</view>
				<image class="wallet" src="../../static/images/wallet.png" mode="" @click="$goto('/pages/mine/wallet')"></image>
			</view>
		</view>

		<view class="padding text-white">
			<view class="way" @click="$goto('')">

			</view>
		</view>

		<u-cell-group>
			<u-cell-item :title="i.text" v-for="i in list" :key="i.text" @click="$goto(i.path)">
				<image :src="i.img" class="png" mode="aspectFit" slot="icon"></image>
			</u-cell-item>
		</u-cell-group>
	</view>
</template>

<script>
	import store from '@/store.js'
	export default {
		data() {
			return {
				list: [{
						img: '../../static/images/41.png',
						text: '我的团队',
						path: '/pages/mine/team'
					},
					{
						img: '../../static/images/42.png',
						text: '我的收益',
						path: '/pages/mine/profit'
					},
					{
						img: '../../static/images/43.png',
						text: '订单管理',
						path: '/pages/shop/main?tab=orders'
					},
					{
						img: '../../static/images/44.png',
						text: '我的油卡',
						path: '/pages/mine/oilcard'
					},
					{
						img: '../../static/images/45.png',
						text: '个人资料',
						path: '/pages/mine/personal-edit'
					},
					{
						img: '../../static/images/bank.png',
						text: '银行卡',
						path: '/pages/mine/bank'
					},
					{
						img: '../../static/images/46.png',
						text: '账号安全',
						path: '/pages/account/safe'
					}
				]
			};
		},
		computed: {
			token: state => store.state.token,
			userinfo: state => store.state.userinfo,
			wallet: state => store.state.userinfo.userfund
		},
		onShow() {
			this.$u.api.getUserinfo();
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		width: 750rpx;
		height: 520rpx;
		background-color: #191919;
		display: flex;
		align-items: center;
		padding-left: 50rpx;
		padding-bottom: 80rpx;
		position: relative;
		margin-bottom: 50rpx;

		.setting {
			position: absolute;
			top: 36rpx;
			right: 30rpx;
			width: 60rpx;
		}

		.user {
			color: #fff;
			display: flex;
			align-items: center;

			.name {
				font-size: 32rpx;
				font-weight: bold;
				display: flex;
				align-items: center;

				.vip {
					padding: 6rpx 10rpx;
					margin-left: 10rpx;
					border-radius: 14rpx 0rpx 14rpx 0rpx;

					&.level0 {
						color: #1E1C1B;
						background-color: #787878;
					}

					&.level1 {
						background: linear-gradient(24deg, rgba(249, 88, 86, 1) 0%, rgba(255, 120, 56, 1) 53%, rgba(255, 146, 35, 1) 100%);
					}
				}
			}

			.uid {
				margin-top: 16rpx;
				font-size: 28rpx;
			}
		}

		.msg {
			width: 140rpx;
			height: 50rpx;
			background: linear-gradient(90deg, #d3ac6b 0%, #322d24 100%);
			box-shadow: 0rpx 7rpx 14rpx 2rpx rgba(9, 0, 0, 0.2);
			border-radius: 25rpx 0 0 25rpx;
			position: absolute;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;

			.icon {
				margin-left: -10rpx;
				margin-right: 10rpx;
				font-size: 30rpx;
			}
		}

		.btm {
			width: 697rpx;
			height: 169rpx;
			background: #222222;
			box-shadow: 0rpx 7rpx 16rpx 0rpx rgba(9, 0, 0, 0.19);
			border-radius: 15rpx;
			position: absolute;
			left: 50%;
			bottom: 40rpx;
			transform: translate(-50%, 0);
			display: flex;
			justify-content: space-around;

			.item {
				width: 33.33333%;
				display: flex;
				flex-flow: column;
				justify-content: center;
				align-items: center;
				position: relative;

				&::after {
					content: '';
					width: 2rpx;
					height: 50rpx;
					background-color: #656565;
					position: absolute;
					top: 50%;
					right: 0;
					transform: translate(-50%, -50%);
				}
			}

			.item:nth-of-type(3)::after {
				display: none;
			}

			.line {
				height: 50rpx;
				width: 2rpx;
				background-color: #bebebe;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.wallet {
				width: 280rpx;
				height: 100rpx;
				position: absolute;
				bottom: -100rpx;
				left: 50%;
				transform: translate(-50%, 0);
			}
		}
	}

	.way {
		background-image: url('@/static/images/tab4xx.png');
		background-size: 100% 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	/deep/ .u-cell_title {
		font-size: 30rpx;
		color: #8799a3;
	}
	/deep/ .u-iconfont {
		color: #8799a3;
	}
	.png {
		width: 40rpx;
		height: 40rpx;
		margin-top: -4rpx;
		margin-right: 16rpx;
	}
</style>
